<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //源数据
    let person = {
      name:'张三',
      age:18
    }
    //模拟Vue2中的实现响应式
    //#region 
    // let p = {}
    // Object.defineProperty(p,'name',{
    //   configurable:true,
    //   get(){ //有人读取name时调用
    //     return person.name
    //   },
    //   set(Value){ //有人修改name时调用
    //     console.log('修改name,我发现了需要去更新界面');
    //     person.name = Value
    //   }
    // })
    // Object.defineProperty(p,'age',{
    //   get(){ //有人读取age时调用
    //     return person.age
    //   },
    //   set(Value){ //有人修改age时调用
    //     console.log('修改age,我发现了需要去更新界面');
    //     person.age = Value
    //   }
    // })
    //#endregion
    //模拟Vue3中的实现响应式,使用了Proxy代理与Reflect反射对象
    //通过proxy代理:拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
    //通过Reflect反射：对源头对象的属性进行操作
    //#region
    const p = new Proxy(person,{
      //有人读取p的某个属性时调用
      get(target,key){
        console.log(`读取${key}`,target)
        return Reflect.get(target,key) 
      },
      //有人修改p的某个属性,或者p追加某个属性时调用
      set(target,key,value){
        console.log('修改'+key+',我发现了需要去更新界面');
         Reflect.set(target,key,value)
      },
      //有人删除p的某个属性时调用
      deleteProperty(target,key){
        console.log('删除'+key+',我发现了需要去更新界面');
        return Reflect.deleteProperty(target,key)
      }
    })
    //#endregion
    let obj = {a:1,b:2}
    //通过Object.defineProperty()去操作
    /* Object.defineProperty(obj,'c',{
      get(){
        return this.a + this.b
      }
    })
    Object.defineProperty(obj,'c',{
      get(){
        return 4
      }
    }) */
    //通过Reflect.defineProperty()去操作
    /* const x1 = Reflect.defineProperty(obj,'c',{
      get(){
        return this.a + this.b
      }
    })
    console.log(x1);
    const x2 =  Reflect.defineProperty(obj,'c',{
      get(){
        return 4
      }
    })
    console.log(x2);
    if(x2){
      console.log('某某某操作成功了');
    }else{
      console.log('某某某操作失败了');
    } */
  </script>
</body>
</html>